<template>
  <el-dialog
    title="详情"
    :visible.sync="visible"
    :before-close="close"
    :append-to-body="true"
    :close-on-click-modal="true"
    width="60%">
    <el-table
    	:data="times"
    	border
      fit
      highlight-current-row
      :row-class-name="tableRowClassName"
      style="width: 100%">
      <el-table-column
        prop="planTimeId"
        header-align="center"
        align="center"
        label="编号"
        width="80">
      </el-table-column>
      <el-table-column
        header-align="center"
        align="center"
        label="取样点"
        width="80">
        <template slot-scope="{row}">
          {{ row.timeValue + row.timeName }}
        </template>
      </el-table-column>
      <el-table-column
        header-align="center"
        align="center"
        label="取样量"
        width="100">
        <template slot-scope="{row}">
          {{ row.getQuantity + row.getUnitName }}
        </template>
      </el-table-column>
      <el-table-column
        prop="timePoint"
        header-align="center"
        align="center"
        label="具体取样时间"
        width="110">
        <template slot-scope="{row}">
          {{ row.timePoint | changeTime }}
        </template>
      </el-table-column>
      <el-table-column
        header-align="center"
        align="center"
        label="提醒时间段"
        width="180">
        <template slot-scope="{row}">
          {{ ctime(row.beginTimePoint) + '~' + ctime(row.endTimePoint) }}
        </template>
      </el-table-column>
      <el-table-column
        prop="itemNames"
        header-align="center"
        align="center"
        label="项目">
        <template slot-scope="{row}">
          <span v-for="(s,index) in row.standards" :key="index">
            <span style="color: #D4B249" v-html="s.nationInspectionStandardNum + ':'"></span><br>
            {{ s.itemNames }}<br>
          </span>
        </template>
      </el-table-column>
      <el-table-column
        header-align="center"
        align="center"
        label="状态"
        width="80">
        <template slot-scope="{row}">
          {{ row.status == 1 ? '未完成' : '已完成' }}
        </template>
      </el-table-column>
      <el-table-column
        header-align="center"
        align="center"
        label="是否为增测"
        width="100">
        <template slot-scope="{row}">
          {{ row.isStability == 1 ? '是' : '否' }}
        </template>
      </el-table-column>
    </el-table>

    <el-card shadow="hover">
      <el-form :model="plan" label-width="160px">
        <el-form-item label="计划名称:">
          {{ plan.planName }}
        </el-form-item>

        <el-form-item label="考察方式:">
          {{ plan.stabilityModeName }}
        </el-form-item>

        <el-form-item label="检测周期:">
          {{ plan.checkPeriodValue + plan.checkPeriodTimeName }}
        </el-form-item>

        <el-form-item label="检测频率:">
          {{ plan.checkFrequency }}
        </el-form-item>

        <el-form-item label="包装:">
          {{ plan.pack }}
        </el-form-item>

        <el-form-item label="稳考进度:">
          {{ plan.now + '/' + plan.total }}
        </el-form-item>

        <el-form-item label="稳考状态:">
          {{ plan.status == 1 ? '未完成' : '已完成' }}
        </el-form-item>

        <el-form-item label="生产车间:">
          {{ plan.workshopName }}
        </el-form-item>

        <el-form-item label="生产日期:">
          {{ plan.productionDate | changeTime }}
        </el-form-item>

        <el-form-item label="有效期至:">
          {{ plan.validityDate | changeTime }}
        </el-form-item>

        <el-form-item label="货品名称:">
          {{ plan.productName }}
        </el-form-item>

        <el-form-item label="物料编码:">
          {{ plan.productGmp }}
        </el-form-item>

        <el-form-item label="货品规格:">
          <span v-html="plan.productSpec"></span>
        </el-form-item>

        <el-form-item label="包装规格:">
          {{ plan.productPackSpec }}
        </el-form-item>

        <el-form-item label="批号:">
          {{ plan.batchNum }}
        </el-form-item>

        <el-form-item label="库存量:">
          {{ plan.inventory == null ? '未知' : (plan.inventory+plan.inventoryUnitName) }}
        </el-form-item>

        <el-form-item label="入库数量(小单位):">
          {{ plan.incomingMini + plan.incomingMiniUnitName }}
        </el-form-item>

        <el-form-item label="入库数量(大单位):">
          {{ plan.incomingBig + plan.incomingBigUnitName }}
        </el-form-item>

        <el-form-item label="存放时间:">
          {{ plan.storeDate | changeTime }}
        </el-form-item>

        <el-form-item label="贮藏:">
          {{ plan.storeEnv }}
        </el-form-item>

        <el-form-item label="成品贮藏条件:">
          {{ plan.cpStoreEnv }}
        </el-form-item>

        <el-form-item label="温度:">
          {{ plan.envT }}
        </el-form-item>

        <el-form-item label="湿度:">
          {{ plan.envH }}
        </el-form-item>

        <el-form-item label="存放位置:">
          {{ plan.storeLocation }}
        </el-form-item>

        <el-form-item label="稳考目的:">
          {{ plan.stabilityPurpose }}
        </el-form-item>

        <el-form-item label="批准文号:">
          {{ plan.approvalNum }}
        </el-form-item>

        <el-form-item label="备注:">
          {{ plan.remark }}
        </el-form-item>
      </el-form>
    </el-card>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" class="pan-btn primary-btn" size="small" @click="close">关 闭</el-button>
    </span>
  </el-dialog>
</template>

<script>
  import { isBlank } from '@/common/js/utils'
  export default {
    data() {
    	return {
    		visible: false,
        plan: {},
        times: []
      }
    },
    props: ["childDataForm"],
    created() {
      if (!isBlank(this.childDataForm)) {
        this.plan = this.childDataForm
        this.times = this.plan.times.map(t => {
          if (!isBlank(t.standards)) {
            t.standards = t.standards.map(s => {
              this.$set(s,'itemNames',s.items.map(it => {
                return it.inspectionItemName
              }).join('、'))
              return s
            })
          }
          return t
        })
        this.visible = true
      }
    },
    methods: {
      close() {
      	this.$emit('close')
      	this.visible = false
      },
      tableRowClassName({row, rowIndex}) {
        if (row.status === 1) {
          return 'warning-row'
        } else if (row.status === 2) {
          return 'success-row'
        }
        return ''
      },
      ctime(value) {
        if (value) {
          return value.split(' ')[0]
        }
        return ''
      }
    }
  }
</script>

<style scoped>
  >>> .el-table .warning-row {
      background: oldlace;
    }
  >>> .el-table .success-row {
    background: #f0f9eb;
  }
  >>> .el-form-item__content {
    line-height: 20px !important;
  }
  >>> .el-form-item__label {
    line-height: 20px;
  }
  >>> .el-form-item {
    margin-bottom: 5px;
  }
</style>
